<template>
  <a-drawer
    :title="title"
    :width="720"
    :visible="visible"
    :wrapStyle="{height: '100%',overflow: 'auto',paddingBottom: '108px'}"
    @close="close"
  >
    <a-divider orientation="left">订单信息</a-divider>
    <a-form :form="form">
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="订单来源"
      >
        <a-select placeholder="请选择订单来源" v-decorator="[ 'source', {rules: [{ required: true, message: '请选择订单来源!' }]}]">
          <a-select-option v-for="(item,index) in orderSourceEnum" :key="index" :value="item.KEY">
            {{ item.NAME }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="客户信息"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-row :gutter="5">
          <a-col :span="20">
            <a-input
              disabled
              v-decorator="[
                'customerName',
                { rules: [{ required: true, message: '请选择!' }] },
              ]"
              placeholder="请选择客户"
            />
            <a-input
              hidden
              v-decorator="[
                'customerId',
                { rules: [{ required: true, message: '请选择!' }] },
              ]"
              placeholder="请选择客户"
            />
          </a-col>
          <a-col :span="4">
            <a-button type="primary" @click="$refs.customerListModal.show()">选择</a-button>
          </a-col>
        </a-row>
      </a-form-item>

      <a-form-item
        label="商品信息"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-row :gutter="5">
          <a-col :span="20">
            <a-input
              disabled
              v-decorator="[
                'commodityName',
                { rules: [{ required: true, message: '请选择!' }] },
              ]"
              placeholder="请选择商品"
            />
            <a-input
              hidden
              v-decorator="[
                'commodityId',
                { rules: [{ required: true, message: '请选择!' }] },
              ]"
              placeholder="请选择商品"
            />
          </a-col>
          <a-col :span="4">
            <a-button type="primary" @click="$refs.commodityListModal.show()">选择</a-button>
          </a-col>
        </a-row>
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="订单金额"
      >
        <a-input
          type="number"
          placeholder="请输入订单金额"
          v-decorator="[ 'amountDesc', {rules: [{ required: true, message: '请输入订单金额!' }]}]" />
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="客户联系方式"
      >
        <a-input placeholder="请输入客户联系方式" v-decorator="[ 'customerContact', {rules: [{ required: true, message: '请输入客户联系方式!' }]}]" />
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="支付方式"
      >
        <a-select placeholder="请选择支付方式" v-decorator="[ 'paymentMode', {rules: [{ required: true, message: '请选择支付方式!' }]}]">
          <a-select-option v-for="(item,index) in orderPaymentModeEnum" :key="index" :value="item.KEY">
            {{ item.NAME }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-divider orientation="left">物流信息</a-divider>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="配送方式"
      >
        <a-select placeholder="请选择配送方式" v-decorator="[ 'distributionMode', {rules: [{ required: true, message: '请选择配送方式!' }]}]">
          <a-select-option v-for="(item,index) in orderDistributionModeEnum" :key="index" :value="item.KEY">
            {{ item.NAME }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="运单号"
      >
        <a-input placeholder="请输入运单号" v-decorator="[ 'waybillNo', {rules: [{ required: true, message: '请输入运单号!' }]}]" />
      </a-form-item>
    </a-form>

    <div class="drawer-bottom-button">
      <a-button :style="{marginRight: '8px'}" @click="close">取消</a-button>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">保存</a-button>
    </div>

    <commodity-list-modal ref="commodityListModal" @setCommodityId="setCommodityId"></commodity-list-modal>
    <customer-list ref="customerListModal" @setCustomerId="setCustomerId"></customer-list>
  </a-drawer>
</template>

<script>
import CommodityListModal from './CommodityListModal'
import CustomerList from './CustomerList'
import { FormModalMixin } from '@/mixins/FormModalMixin'
import { apiQueryOrderById, apiSaveOrder, apiUpdateOrder } from '@/api/order'
import { ORDER_PAYMENT_MODE_ENUM, ORDER_SOURCE_ENUM, ORDER_DISTRIBUTION_MODE_ENUM } from '@/store/mutation-types'
import pick from 'lodash.pick'

export default {
  name: 'OrderModal',
  mixins: [FormModalMixin],
  components: {
    CommodityListModal, CustomerList
  },
  data () {
    return {
      orderSourceEnum: ORDER_SOURCE_ENUM,
      orderPaymentModeEnum: ORDER_PAYMENT_MODE_ENUM,
      orderDistributionModeEnum: ORDER_DISTRIBUTION_MODE_ENUM
    }
  },
  methods: {
    show (title, record) {
      this.resetFields()
      this.model = {}
      this.visible = true
      this.title = title
      if (record) {
        apiQueryOrderById(record.id).then(res => {
          this.model = Object.assign({}, res.data)
          this.$nextTick(() => {
            this.form.setFieldsValue(pick(this.model, 'id', 'source', 'customerId', 'commodityId', 'commodityName', 'amountDesc', 'customerContact', 'paymentMode', 'distributionMode', 'waybillNo'))
            this.form.setFieldsValue({
              customerName: this.model.customer.name + '/' + this.model.customer.mobile
            })
          })
        })
      }
    },
    setCommodityId (commodity) {
      console.log(commodity)
      this.form.setFieldsValue({
        commodityId: commodity.id,
        commodityName: commodity.name
      })
    },
    setCustomerId (customer) {
      console.log(customer)
      this.form.setFieldsValue({
        customerId: customer.id,
        customerName: customer.name + '/' + customer.mobile
      })
    },
    handleSubmit () {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = false
          const formData = pick(Object.assign(this.model, values), 'source', 'customerId', 'commodityId', 'amountDesc', 'customerContact', 'paymentMode', 'distributionMode', 'waybillNo')
          let obj
          if (this.model.id) {
            obj = apiUpdateOrder(this.model.id, formData)
          } else {
            obj = apiSaveOrder(formData)
          }
          obj.then(res => {
            if (res.code === 1) {
              this.$message.success(res.msg)
              this.$emit('ok')
              this.close()
            } else {
              this.$message.warning(res.msg)
            }
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
